<script setup>
import { DocumentCopy } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getInfoApi } from '@/api/tickets/index.js'
import { ElMessage } from 'element-plus'
import OrderDetail from '@/components/My/OrderDetail/index.vue'
import PopUps from '@/components/My/PopUps/index.vue'

const route = useRoute()
const router = useRouter()

const data = ref({})

onMounted(async () => {
  orderId.value = route.query.orderId
  const params = {
    id: orderId.value,
  }
  data.value = (await getInfoApi(params)).data
})

const orderId = ref('')

const steps = ref([
  {
    step: '提交订单',
    title: '制单人',
    name: 'name',
    time: '2020/10/10 14:00:39',
  },
  {
    step: '领导审核',
    title: '审核人',
    name: 'name',
    time: '2020/10/10 14:00:39',
  },
  {
    step: '车间制作',
    title: 'title',
    name: '车间名称',
    time: '2020/10/10 14:00:39',
  },
  {
    step: '上门安装',
    title: '施工队名称',
    name: 'name',
    time: '2020/10/10 14:00:39',
  },
  {
    step: '验收',
    title: '验收人',
    name: 'name',
    time: '2020/10/10 14:00:39',
  },
  {
    step: '订单完成',
    title: 'title',
    name: 'name',
    time: '2020/10/10 14:00:39',
  },
])

const gotoOrderListPage = () => {
  router.push('/tickets/todo')
}
const copyText = (text = '') => {
  try {
    return navigator.clipboard
      .writeText(text)
      .then(() => {
        ElMessage.success('复制成功')
        return Promise.resolve();
      })
      .catch(err => {
        ElMessage.error('复制失败')
        return Promise.reject(err);
      });
  } catch (e) {
// 如果navigator.clipboard不可用，使用document.execCommand
    let input = document.createElement('input');
    input.style.position = 'fixed';
    input.style.top = '-10000px';
    input.style.zIndex = '-999';
    document.body.appendChild(input);
    input.value = text;
    input.focus();
    input.select();
    try {
      let result = document.execCommand('copy');
      document.body.removeChild(input);
      if (!result || result === 'unsuccessful') {
        ElMessage.error('复制失败')
        return Promise.reject('复制失败');
      } else {
        ElMessage.success('复制成功')
        return Promise.resolve();
      }
    } catch (e) {
      document.body.removeChild(input);
      ElMessage.warning('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
      return Promise.reject('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作');
    }
  }
}
const handleCopy = () => {
  copyText(orderId.value)
}
const popFlag = ref(false)

// 关闭详情模态框
const closePopUps = (flag) => {
  popFlag.value = flag
}

const viewDetail = () => {
  popFlag.value = true
}
</script>

<template>
  <div class="top-container">
    <img alt="" src="@/assets/icons/check-circle-fill.png" style="width: 48px; height: 48px" />
    <div class="top-title">提交成功</div>
    <div class="top-content">工单提交成功！</div>
    <div class="button-group-container">
      <el-button bg text type="info" @click="viewDetail">查看详情</el-button>
      <el-button type="primary" @click="gotoOrderListPage">返回项目列表</el-button>
    </div>
  </div>
  <div class="bottom-container">
    <div class="orderId" @click="handleCopy">
      工单编号：{{ orderId }}
      <el-icon>
        <DocumentCopy />
      </el-icon>
    </div>
    <div class="steps-container">
      <el-steps :active="0" :process-status="'finish'" align-center style="width: 1010px">
        <el-step v-for="step in steps" :title="step.step">
          <template #icon>
            <i class="iconfont icon-dot" />
          </template>
          <template #title>
            <div style="text-wrap: nowrap; color: #a8abb2">{{ step.step }}</div>
          </template>
          <!--          <template #description>-->
          <!--            <div style="text-wrap: nowrap; color: #a8abb2">-->
          <!--              {{ step.title }}<span v-if="step">: </span>-->
          <!--              <span style="color: #1947ff">{{ step.name }}</span>-->
          <!--            </div>-->
          <!--            <div style="text-wrap: nowrap; color: #a8abb2">{{ step.time }}</div>-->
          <!--          </template>-->
        </el-step>
      </el-steps>
    </div>
  </div>
  <PopUps v-if="popFlag" widthMy='60%'  height-my="78%">
    <!-- 详细弹窗 -->
    <OrderDetail :rowDataDetail="data" @closePopUps="closePopUps"></OrderDetail>
  </PopUps>
</template>

<style lang="scss" scoped>
:deep(.el-step__icon) {
  background: #f7f8fa;
  height: 10px;
}

:deep(.is-finish) {
  .el-step__line {
    background: #1947ff !important;
  }
}

.top-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 204px;

  .top-title {
    margin-top: 16px;
    height: 22px;
    font-weight: bold;
    font-size: 14px;
    color: #1d2129;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .top-content {
    height: 22px;
    font-weight: normal;
    font-size: 14px;
    color: #86909c;
    line-height: 22px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .button-group-container {
    margin-top: 16px;
  }
}

.bottom-container {
  margin: 74px auto 0 auto;
  width: 1068px;
  height: 174px;
  background: #f7f8fa;
  border-radius: 4px 4px 4px 4px;
  padding: 10px 29px 18px 29px;

  .orderId {
    width: fit-content;
    height: 24px;
    font-weight: bold;
    font-size: 16px;
    color: #1d2129;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .orderId:hover {
    cursor: pointer;
  }

  .steps-container {
    margin-top: 36px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
